<template>
  <dvan-form @failed="onFailed">
    <!-- 頭部 -->
    <van-nav-bar title="">
      <template #left>
        <router-link to="/">
          <a
            class="qx"
            style="color:#333333"
          >取消</a>
        </router-link>
      </template>
      <template #right>
        <van-button
          class="fb"
          type="primary"
          size="small"
          @click="onSubmit"
        >发布</van-button>
      </template>
    </van-nav-bar>

    <!-- body -->
    <div
      class="card"
      style="margin-top:0"
    >
      <div class="card-body">
        <!-- <van-field
          v-model="formData.content"
          type="textarea"
          placeholder="请说明你的求助内容…"
          maxlength="1000"
          
        /> -->
        <div class="area-body">
          <textarea
            class="area"
            maxlength="1000"
            v-model="formData.content"
            cols="30"
            rows="10"
            placeholder="请说明你的求助内容…"
          ></textarea>
        </div>
        <van-uploader
          accept='image/*'
          v-model="fileData"
          multiple='true'
          max-count='9'
          :after-read="uploadFile"
          :before-delete="deleteFile"
        >
          <div class="van-uploader__upload"><i
              class="van-badge__wrapper van-badge__wrapper van-icon van-icon-plus"
              style="font-size:1rem;color:#999;"
            ></i><input
              type="file"
              class="van-uploader__input"
              accept="image/*,video/*"
            ></div>
        </van-uploader>
        
      </div>
    </div>
    <div class="card">
      <div class="card-head">
        <span><img
            src="@/assets/images/icon5.png"
            alt=""
          />紧急程度</span>
      </div>
      <div class="card-body">
        <div
          v-for="item in labelsBoxData"
          :key="item"
          style="text-align: center"
        >
          <LabelsBox
            :data="item"
            @run-parent="getChild"
          ></LabelsBox>
        </div>
      </div>
    </div>
    <!-- <div class="card">
      <div class="card-head">
        <span><img
            src="@/assets/images/icon6.png"
            alt=""
          />提醒谁看</span>
      </div> -->
      <!-- 历史 -->
      <!-- <div>
        <div
          class="befor-head"
          v-if="historyTipList.length > 0"
        >
          历史提醒过的人<img
            src="@/assets/images/del.png"
            alt=""
            @click="delAllHistoryTip"
          />
        </div>
        <div class="history-tip-body">
          <div
            class="history-tip-body-item"
            v-for="item in historyTipList"
            :key="item"
            style="text-align: center"
          >
            {{item.addadmin}}
            <i
              class="van-badge__wrapper van-icon van-icon-cross"
              @click="delHistoryTip(item)"
            />
          </div>
        </div>
      </div>
      <div>
        <van-search
          v-model="value"
          placeholder="请输入员工姓名或部门名称"
        />
      </div> -->
      <!-- <div class="card-body"> -->
        <!-- <RadioList
          :teamList='teamList'
          @changeRadio='onChangeRadio'
        ></RadioList> -->
        <!-- <van-radio-group v-model="checked">
        <van-radio name="1" icon-size="24px">我自己</van-radio>
        <van-radio name="2" icon-size="24px">所有人</van-radio>
      </van-radio-group> -->
      <!-- </div>
    </div> -->
  </dvan-form>
</template>

<style lang="less" scoped>
.area-body {
  font-size: 32px;
  font-weight: 400;
  .area {
    width: 100%;
    border: none;
    height: 50px;
  }
}
.qx {
  font-size: 32px;
  font-weight: 400;
}
.fb {
  width: 120px;
  font-size: 30px;
}
a {
  font-size: 32px;
}
.search-body {
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
  margin-bottom: 0.3125rem;
}
.card {
  margin-top: 30px;
  background: #fff;
  text-align: left;
  padding: 30px;
  .card-head {
    font-size: 32px;
    img {
      width: 32px;
      height: 32px;
      margin: -5px 15px;
    }
  }
  .history-tip-body {
    display: flex;
    .history-tip-body-item {
      background: #f3f4f6;
      font-size: 26px;
      margin-right: 20px;
      padding: 10px 20px;
    }
  }
  .befor-head {
    padding: 30px;
    color: #999999;
    font-size: 28px;
    img {
      width: 32px;
      height: 32px;
      float: right;
    }
  }
  .card-body {
    background: #ffffff;
    font-size: 28px;
    .img-body {
      width: 196px;
      height: 196px;
    }
    textarea {
      min-height: 200px;
    }
  }
}
</style>
<script>
import { Button, NavBar, Uploader, Tag, Search, field, Toast } from "vant";
import httpRequest from "@/util/httpRequest";
import maps from "@/util/maps";
import LabelsBox from "@/components/labelsBox.vue";
// import RadioList from "@/components/task/radioList.vue";
import { useRouter } from "vue-router";
/**
 * content	string	新任务内容	

  urgentLevel	number	紧急程度	

  isPublic	number	是否公开	

  targetDeptIds	long[] []	新任务@部门 :	item 类型: long[]

  targetUserIds	long[] []	新任务@目标 :	item 类型: long[]

  resourcesURL	string []	资源url数组 :	item 类型: string
 */
export default {
  components: {
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Uploader.name]: Uploader,
    [Tag.name]: Tag,
    [Search.name]: Search,
    [field.name]: field,
    [Toast.name]: Toast,
    LabelsBox,
    // RadioList
  },
  data() {
    return {
      formData: {
        isPublic: 0,
        targetUserIds: [],
        targetDeptIds: []
      },
      historyTipList: [],
      fileData: [],
      router: useRouter(),
      teamList: [],
      fileList: [],
      labelsBoxData: [],
      labelsCloseData: [],
      isUploadFinish:true,
    };
  },
  // 注意：组件挂载后才能访问到 ref 对象
  mounted() {
    this.labelsBoxData = [
      {
        titel: "",
        styleType: "C",
        lebType: "taskType",
        status: 1,
        labels: maps.urgentLevelLabMap2
      }
    ];
    this.labelsCloseData = [
      {
        titel: "",
        styleType: "E",
        labels: [
          {
            name: "陈天宏"
          },
          {
            name: "戈建亚"
          },
          {
            name: "潘辰辰"
          },
          {
            name: "王晓鑫"
          },
          {
            name: "赵多"
          }
        ]
      }
    ];
    this.init();
  },
  methods: {
    init() {
      maps.getDepts().then(e => {
        this.teamList = e;
        // maps.getHistoryTipList().then(teg => {
        //   //@过的历史
        //   this.historyTipList = teg;
        //   console.log("@过的历史:", teg);
        // });
      });
    },
    onChangeRadio(data) {
      // 此时可以自行将文件上传至服务器
      // console.log('onChangeRadio',data);
      if (data.type == "isPublic") {
        this.formData.isPublic = data.isPublic;
      } else {
        this.formData.targetDeptIds = data.targetDeptIds;
        this.formData.targetUserIds = data.targetUserIds || [];
      }
    },
    getChild(data) {
      this.formData.urgentLevel = data.id;
    },
    onSubmit() {
      if(!this.isUploadFinish){
        Toast("图片上传中，请稍后");
        return;
      }
      // console.log('this.formData:',this.formData)
      this.formData.content = this.formData.content.replace(/\n/g, "<br/>");
      if (this.formData["urgentLevel"]) {
        if (this.fileList.length > 0) {
          this.formData.resourcesURL = [];
          for (let i = 0; i < this.fileList.length; i++) {
            const element = this.fileList[i];
            this.formData.resourcesURL.push(element.url);
          }
        }
        // if (this.historyTipList.length > 0) {
        //   //如果有历史@过的人将id加入
        //   for (let i = 0; i < this.historyTipList.length; i++) {
        //     const teg = this.historyTipList[i];
        //     this.formData.targetUserIds.push(teg.id);
        //   }
        // }
        //  console.log('this.formData.resourcesURL:',this.formData.resourcesURL)
        httpRequest.post("提交新任务", this.formData).then(res => {
          res.result == "SUCCESS"
            ? Toast.success("创建成功")
            : Toast.fail(res.msg);
          this.router.push("/");
        });
      } else {
        Toast.fail("注意：发布任务至少需要选择紧急程度！");
      }
    },
    async uploadFile(value) {
      this.isUploadFinish = false;
      if (value.length > 0) {
        for (let i = 0; i < value.length; i++) {
          value[i].status = "uploading";
          await this.poshImg(value[i]);
        }
      } else {
        this.poshImg(value);
      }
      this.isUploadFinish = true;
    },
    async poshImg(value) {

      await httpRequest
        .uploadFileByFormData(value.file)
        .then(res => {
          if (res.result === "SUCCESS") {
            this.fileList.push({ url: res.data });
            value.status = "";
          } else {
            value.status = "failed";
            value.message = "上传失败";
          }
        })
        .catch(() => {
          value.status = "failed";
          value.message = "上传失败";
        });
    },
    deleteFile(value, detail) {
      if (value.status !== "failed") {
        this.fileList.splice(detail.i, 1);
      }
      return true;
    },
    /**
     * 删除@过的人
     */
    // eslint-disable-next-line no-unused-vars
    delHistoryTip(item) {
      // httpRequest.post("删除历史提醒", item).then(res => {
      //   if (res.result == "SUCCESS") {
      //     maps.getHistoryTipList().then(e => {
      //       this.historyTipList = e;
      //     });
      //   }
      // });
    },
    delAllHistoryTip() {
      httpRequest.post("删除历史提醒", this.historyTipList).then(res => {
        if (res.result == "SUCCESS") {
          this.teamList = [];
        }
      });
    }
  }
};
</script>
